<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>原料</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/youyi.css"/>
	</head>
	<body class="online_consulting">
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
					
				</ul>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.init({
				keyEventBind: {
					backbutton: false,  //Boolean(默认true)关闭back按键监听
					menubutton: false   //Boolean(默认true)关闭menu按键监听
				},
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			var prView = null;
			//添加列表项的点击事件
			mui('.mui-scroll').on('tap','a', function(e) {
			  var id = this.getAttribute('id');
			  //获得详情页面
			  if(!prView){
			    prView = plus.webview.getWebviewById('product_details');
			  };
			  		  
			//打开详情页面    
			prView.show("slide-in-right",150);
//			  mui.openWindow({
//			    id:'product_details'
//			  });
			//触发详情页面的newsId事件
			  mui.fire(prView,'newsId',{
			    id:id
			  });	
		});
			/*** 下拉刷新具体业务实现*/
			var isAddCl=false;
			function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 3; i < len; i++) {
						var li = document.createElement('li');
							li.className = 'mui-table-view-cell mui-media';
						var liHTML ='<a href="javascript:;" id='+i+'>';
							liHTML +='<img class="mui-media-object mui-pull-left" src="../images/environmenMap/list_left_img.png">';
							liHTML +='<div class="mui-media-body">';
							liHTML +='<div class="media_body_left">';
							liHTML +='<h1 class="media_body_h">下拉注塑机伺服改造</h1>';
							liHTML +='<p class="media_price mui-ellipsis">价格： 面议</p>';
							liHTML +='<p class="media_cpn_name mui-ellipsis">广州捷霖空气净化有限公司</p>';
							liHTML +='<p class="good_ema mui-ellipsis">2214条评价  好评率85%</p>';
							liHTML +='</div>';
							liHTML +='<div class="media_body_right"><span class="nearly_new">最新</span></div>';
							liHTML +='</div>';
							liHTML +='</a>';
						li.innerHTML = liHTML;						//下拉刷新，新纪录插到最前面；
						table.insertBefore(li, table.firstChild);
						
					};
					showDivSub(isAddCl);
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 500);
			}
			var count = 0;
			/** * 上拉加载具体业务实现*/
			function pullupRefresh() {
				setTimeout(function() { 
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 12; i < len; i++) {
						var li = document.createElement('li');
							li.className = 'mui-table-view-cell mui-media';
						var liHTML ='<a href="javascript:;" id='+i+'>';
							liHTML +='<img class="mui-media-object mui-pull-left" src="../images/environmenMap/list_left_img.png">';
							liHTML +='<div class="mui-media-body">';
							liHTML +='<div class="media_body_left">';
							liHTML +='<h1 class="media_body_h">2上拉注塑机伺服改造</h1>';
							liHTML +='<p class="media_price mui-ellipsis">价格： 面议</p>';
							liHTML +='<p class="media_cpn_name mui-ellipsis">广州捷霖空气净化有限公司</p>';
							liHTML +='<p class="good_ema mui-ellipsis">2214条评价  好评率85%</p>';
							liHTML +='</div>';
							liHTML +='<div class="media_body_right"><span class="hotst">最热</span></div>';
							liHTML +='</div>';
							liHTML +='</a>';
						li.innerHTML = liHTML;
						table.appendChild(li);
						
					};
					showDivSub(isAddCl);
				}, 500);
			};
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 0);
				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
			function showDivSub(aClass){
				if(aClass==true){
					!$(".mui-table-view").hasClass("commodity_list")?addCl():removeCl();
				}else{
					$(".mui-table-view").hasClass("commodity_list")?addCl():removeCl();
				};
				getTogSub();
			};
			
			function addCl(){				
				$(".mui-table-view").removeClass("mui-grid-view").addClass("mui-grid-view").addClass("commodity_list");
				$(".mui-table-view-cell.mui-media").removeClass("mui-col-xs-6").addClass("mui-col-xs-6");
			};
			function removeCl(){
				$(".mui-table-view").removeClass("mui-grid-view").removeClass("commodity_list");
				$(".mui-table-view-cell.mui-media").removeClass("mui-col-xs-6");
			};
			function getTogSub(){
				var returnBl=$(".mui-table-view").hasClass("commodity_list");
				var parentView=plus.webview.currentWebview().opener();
					parentView.evalJS('togListFn('+returnBl+')');
			};			
		</script>
	</body>
</html>